<template>
	<view class="goodsDetails" v-if="goods_detail.goods_id">
		<u-swiper :list="goods_detail.goods_img_list" height="750" border-radius="0"></u-swiper>
		
		<view class="commodityInfo">
			<view class="topBox flexEnd">
				<view class="flex_end">
					<view class="flex">
						<view class="price">￥<text>{{goods_detail.sales_price}}</text></view>
						<view class="original">￥{{goods_detail.original_price}}</view>
					</view>
					<view class="subsidy">积分抵扣:<text class="redText">{{goods_detail.max_income}}%</text></view>
				</view>
				<view class="spell">库存<text>{{goods_detail.sales_num}}</text>个</view>
			</view>
			<view class="bottoBox flex_space_b">
				<view class="title">{{goods_detail.goods_title}}</view>
			</view>
		</view>
		
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="rule mTop1">
			<image class="circuit" :src="goods_detail.goods_sales_rule" mode="widthFix" v-if="goods_detail.goods_sales_rule"></image>
		</view>
		<!-- #endif -->
		
		<view class="introduction mTop1">
			<view class="item flex_space_b">
				<view class="title">配送范围</view>
				<view class="content">全国包邮（港澳台及新疆、西藏、甘肃、青海、内蒙古除外）</view>
			</view>
		</view>
		
		<view class="details mTop1">
			<view class="titleBox flex_conter_c">
				<view class="title">商品详情</view>
			</view>
			<u-parse :html="goods_detail.goods_detail"></u-parse>
			<!-- <rich-text :nodes="html"></rich-text> -->
		</view>
		
		<u-popup v-model="avatarShow" mode="center" :closeable="true" border-radius="8" width="600">
			<view class="avatarPopup">
				<u-avatar :src="avatar_user_headimg" mode="square" size="240"></u-avatar>
				<view class="uName">{{ avatar_user_nickname }}</view>
			</view>
		</u-popup>
		
		<view class="notice mTop1">
			<image class="noticeImg" mode="widthFix" :src="goods_detail.goods_sales_info"></image>
		</view>
		
		<view class="bottomBox">
			<view class="operate">
				<view class="item sixin" hover-class="btnHover" @click="goHome">
					<u-icon name="shouye" custom-prefix="custom-icon" size="32" color="#666"></u-icon>
					<view class="text">首页</view>
				</view>
				<!-- <view class="item service" hover-class="btnHover">
					<u-icon name="star" size="34" color="#666" v-if="false"></u-icon>
					<u-icon name="star-fill" size="34" color="#fe0000" v-else></u-icon>
					<view class="text">收藏</view>
				</view> -->
				<button class="item share" hover-class="btnHover" open-type="share">
					<u-icon name="share" size="34" color="#666"></u-icon>
					<view class="text">邀请</view>
				</button>
			</view>
			<view class="btnBox">
				<button type="primary" class="btn2" hover-class="none">立即购买</button>
			</view>
		</view>
		
		<u-popup v-model="goodsShow" mode="bottom" :closeable="true">
			<view class="popupBox">
				<view class="topBox flex_conter">
					<image class="comImg" mode="aspectFill" :src="goods_detail.goods_main_img"></image>
					<view class="info">
						<view class="title line-2">{{goods_detail.goods_title}}</view>
						<view class="price" >¥{{goods_detail.sales_price}}</view>
					</view>
				</view>
				<view class="format " v-for="(item,index) in goods_detail.goods_spec_list" :key="index">
					<view class="title">{{item.name}}</view>
					<view class="itemList">
						<view class="item" :class="item.val == itm ? 'itemActive' : ''" v-for="(itm, idx) in item.val_array" :key="idx" @click="chooseSpec(index,idx)">{{itm}}</view>
					</view>
				</view>
				
				<button type="primary" class="buyBtn mTop2" hover-class="none" @click="goTreasureOrder">{{ goodsBtnText }}</button>
			</view>
		</u-popup>
		
		<view class="popum" v-for="(item, index) in popumList" :key="index" v-if="popumList.length">
			<image :src="item.popum_img" mode=""></image>
			<view class="uName flex_conter_c">
				<view class="text u-line-1">{{item.popum_nickname}}</view>已参团
			</view>
		</view>
		
		<view class="winningMask" :class="winningShow == true ? 'winningShow' : ''" @click="winningShow = false" @touchmove.stop>
			<view class="winning" @tap.stop>
				<image class="winningImage" mode="widthFix" src="/static/winning.png"></image>
				
				<view class="con mTop3">
					<view class="label">拼中者</view>
					<view class="winningName redText mTop4">
						<view class="avatarBox">
							<image class="crown" src="/static/crown.png" mode="aspectFill"></image>
							<image class="avatar" :src="selected_user_headimg" mode="aspectFill"></image>
						</view>
						<view>{{selected_user_nickname}}</view>
					</view>
					
					<view class="label mTop3">未拼中名单</view>
					<view class="failureList mTop1 flex_conter_c">
						<view class="item flex_conter_c" v-for="(itm,idx) in tuan_order_list" :key="idx" v-if="idx > 0">
							<image class="avatar" :src="itm.user_headimg" mode="aspectFill"></image>
							<view class="uName">{{itm.user_nickname}}</view>
						</view>
					</view>
				</view>
				<!-- <button class="btn mTop3" type="default">确认</button> -->
				
				<view class="iconBox" @click="winningShow = false">
					<text class="custom-icon custom-icon-chahao"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				goods_id:0,
				goods_detail:{},
				goodsShow: false,
				goodsBtnText: '参与拼团',
				// 10 任性直购  20 拼团
				order_type:10,
				choose_spec_list:[],
				uid:0,
				noGroupList:[],
				popum:false,
				popum_img:"",
				popum_nickname:"",
				popumList: [],
				cache: [],
				winningShow: false,
				flag: false,
				order_cycle:0,
				timer:0,
				selected_user_headimg:'',
				selected_user_nickname:'',
				tuan_order_list:[],
				avatarShow: false,
				avatar_user_headimg: '',
				avatar_user_nickname: ''
			}
		},
		onLoad(options) {
			this.goods_id = options.goods_id;
			if(!this.goods_id){
				this.goods_id = uni.getStorageSync("xixuan_pintuan_goods_id");
			}
			this.loadData(true);
		},
		onShareAppMessage() {
			return {
			  title:this.goods_detail.goods_title,
			  imageUrl:this.goods_detail.goods_main_img,
			  path:'/pages/index/goodsDetails?uuid='+this.uid+'&goods_id='+this.goods_id
			}
		},
		onShareTimeline() {
			return {
			  title:this.goods_detail.goods_title,
			  imageUrl:this.goods_detail.goods_main_img,
			  query:'uuid='+this.uid+'&goods_id='+this.goods_id
			}
		},
		onShow() {
			this.timer = setInterval(this.flushData,5000);
			// setTimeout(this.flushData,5000);
		},
		onHide() {
			if(this.timer){
				clearInterval(this.timer);
			}
		},
		onUnload() {
			if(this.timer){
				clearInterval(this.timer);
			}
		},
		methods: {
			avatarEvent (item) {
				// console.log(item);
				this.avatar_user_headimg = item.user_headimg
				this.avatar_user_nickname = item.user_nickname
				this.avatarShow = true
			},
			loadData: function(is_loading){
				// 加载数据
				var that = this;
				let data = {
					goods_id:that.goods_id
				};
				util.requestPost("api.php/home/goodsData", data, function(res) {
					let goods_spec_list = res.data.goods_detail.goods_spec_list;
					let index = 0;
					goods_spec_list.forEach(event=>{
						event.val = goods_spec_list[index]['val_array'][0];
						index ++;
					});
					
					res.data.goods_detail.goods_spec_list = goods_spec_list;
					
					let groupNumber = res.data.goods_detail.sub_team_count;
					let userNumber = res.data.goods_detail.current_order_user_list.length;
				
					that.goods_detail = res.data.goods_detail;
					
					that.uid = res.data.uid;
					that.order_cycle = res.data.order_cycle;
					
					let number = groupNumber - userNumber;
					that.noGroupList = that.getLoopArray(0, number-1);
					
					// #ifdef APP-PLUS || H5
					if(!that.goods_detail.goods_sales_rule){
						that.goods_detail.goods_sales_rule = "http://xcx.tfxiaochengxu.com/2020-11-19_5fb62674756a3.png";
					}
					// #endif
				},
				is_loading);
			},
			chooseSpec (index,idx) {
				// 选择类型
				let goods_detail = this.goods_detail;
				let goods_spec_list = this.goods_detail.goods_spec_list;
				goods_spec_list[index].val = goods_spec_list[index]['val_array'][idx];
				goods_detail.goods_spec_list = goods_spec_list;
				this.goods_detail = goods_detail;
			},
			// 获取数组
			getLoopArray (start,end) {
				let array = [];
				for (let i = start; i <= end; i++) {
				  array.push(i);
				}
				return array;
			},
			verifySpec(){
				// 校验商品属性选择
				let flag = true;
				let flag_msg = "";
				let choose_spec_list = [];
				this.goods_detail.goods_spec_list.forEach(event=>{
					if(!event.val){
						if(!flag_msg){
							flag_msg = "请选择商品属性："+event.name;
						}
						flag = false;
					}else{
						choose_spec_list.push({name:event.name,val:event.val});
					}
				});
				if(!flag){
					util.toast(flag_msg);
				}
				this.choose_spec_list = choose_spec_list;
				return flag;
			},
			goTreasureOrder () {
				if(this.verifySpec()){
					this.goodsShow = false;
					// 跳转下单
					uni.navigateTo({
						url: "/pages/index/treasureOrder?order_type="+this.order_type+"&choose_spec_json="+JSON.stringify(this.choose_spec_list)+"&goods_id="+this.goods_detail.goods_id+"&goods_main_img="+this.goods_detail.goods_main_img+"&goods_title="+this.goods_detail.goods_title+"&sales_price="+this.goods_detail.sales_price						
					});
				}
			},
			purchaseEvent () {
				let that = this;
				uni.showModal({
					title:'友情提示',
					content:'确认直接购买吗？',
					success(res) {
						if (res.confirm) {
							// 直接购买
							if(util.is_wechat_xcx_auth()){
								that.order_type = '10';
								that.goodsBtnText = '单人购买';
								that.goodsShow = true;
								if(that.goods_detail.goods_spec_list.length == 1 && that.goods_detail.goods_spec_list[0]['val_array'].length == 1){
									that.goTreasureOrder();
								}
							}
						}
					}
				})
				
			},
			groupEvent () {
				// 拼团
				if(util.is_wechat_xcx_auth()){
					this.order_type = '20';
					this.goodsBtnText = '参与拼团';
					this.goodsShow = true;
					if(this.goods_detail.goods_spec_list.length == 1 && this.goods_detail.goods_spec_list[0]['val_array'].length == 1){
						this.goTreasureOrder();
					}
				}
			},
			goHome () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			flushData(){
				var that = this;
				let data = {
					goods_id:that.goods_id,
					order_cycle:that.order_cycle
				};
				util.requestPost("api.php/home/flushGoodsOrderData", data, function(res) {
					let groupNumber = that.goods_detail.sub_team_count;
					let current_order_user_list = res.data.current_order_user_list;
					let userNumber =current_order_user_list.length;
					let tmp_current_order_list =  that.goods_detail.current_order_user_list;
					that.goods_detail.current_order_user_list = current_order_user_list;
					
					let flag = false;
					let index = 1;
					current_order_user_list.forEach(event=>{
						if(index > tmp_current_order_list.length){
							that.addPopumList(event.user_headimg,event.user_nickname);
							flag = true;
						}
						index ++;
					});
					
					if(flag){
						that.showSwiper();
					}
					
					let number = groupNumber - userNumber;
					that.noGroupList = that.getLoopArray(0, number-1);
					
					let last_tuan_order_user_list = res.data.last_tuan_order_user_list;
					if(last_tuan_order_user_list.length > 0){
						that.selected_user_headimg = last_tuan_order_user_list[0].user_headimg;
						that.selected_user_nickname = last_tuan_order_user_list[0].user_nickname;
						that.tuan_order_list = last_tuan_order_user_list;
						that.order_cycle = parseInt(that.order_cycle) +1;
						that.goods_detail.sales_num = parseInt(that.goods_detail.sales_num) + 1;
						that.winningShow = true;
					}
					
				},
				false);
			},
			showSwiper () {
				if(this.cache.length == 0){
					return false;
				}
				// 防止在清空popumList数组时，又添加了数据
				if (this.flag && this.popumList.length !== 0) {
					this.popumList = []
					setTimeout(() => {
						this.flag = false
						this.showSwiper()
					}, 1500);
				} else if (this.cache.length >= 1) {
					// 参团人员数据修改
					this.popumList.push(this.cache[0]);
					this.cache.shift();
					setTimeout(() => {
						this.flag = false
						this.showSwiper()
					}, 2500);
				} else {
					setTimeout(() => {
						this.flag = true
						this.showSwiper()
					}, 1500);
				}
			},
			addPopumList (img,nickname) {
				this.cache.push({
					popum_img: img,
					popum_nickname: nickname,
				})
			},
			goUrl (url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped>
.goodsDetails {
	min-height: 100%;
	background-color: var(--bgColor);
	padding-bottom: 100rpx;
}
.commodityInfo {
	background: #FFFFFF;
}
.commodityInfo .topBox {
	background-color: #fa4743;
	padding: 12rpx 24rpx;
}
.commodityInfo .topBox .flex {
	vertical-align: bottom;
}
.commodityInfo .topBox .flex .price {
	display: inline-block;
	font-size: 24rpx;
	font-weight: 600;
	color: #FFFFFF;
}
.commodityInfo .topBox .flex .price text {
	font-size: 46rpx;
}
.commodityInfo .topBox .flex .original {
	display: inline-block;
	font-size: 24rpx;
	text-decoration: line-through;
	margin-left: 20rpx;
	color: #FFFFFF;
}
.commodityInfo .topBox.flexEnd {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.commodityInfo .topBox .subsidy {
	font-size: 24rpx;
	margin-left: 26rpx;
	color: #fffc5c;
}
.commodityInfo .topBox .subsidy text{
	color: #FFFFFF;
}
.commodityInfo .topBox .spell {
	font-size: 24rpx;
	color: #FFFFFF;
}
.commodityInfo .topBox .spell text {
	color: #fffc5c;
	margin: 0 4rpx;
}
.commodityInfo .bottoBox {
	padding: 20rpx;
}
.commodityInfo .bottoBox .title{
	font-size: 32rpx;
}

.rule {
	background-color: #FFFFFF;
}
.rule .titleBox {
	font-weight: 600;
	padding: 20rpx 0;
	/* border-bottom: 1rpx solid #EEEEEE; */
}
.rule .titleBox .title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	position: relative;
	padding: 0 80rpx;
}
.rule .title::before {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	left: 0;
	top: 18rpx;
}
.rule .title::after {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	right: 0;
	top: 18rpx;
}
.rule .circuit {
	width: 750rpx;
}

.group {
	background-color: #FFFFFF;
}
.group .titleBox {
	font-weight: 600;
	padding: 20rpx 0;
	/* border-bottom: 1rpx solid #EEEEEE; */
}
.group .titleBox .title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	position: relative;
	padding: 0 80rpx;
}
.group .title::before {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	left: 0;
	top: 18rpx;
}
.group .title::after {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	right: 0;
	top: 18rpx;
}
.group .groupList {
	padding: 0 20rpx 20rpx;
}
.group .groupList .avatar {
	margin: 10rpx 14rpx;
}
.group .groupList .noGroup {
	width: 64rpx;
	height: 64rpx;
	border-radius: 56rpx;
	background-color: #EEEEEE;
	margin: 10rpx 14rpx;
}
.group .text {
	text-align: center;
	font-size: 24rpx;
	color: #666666;
	margin-top: 12rpx;
}

.introduction {
	background-color: #FFFFFF;
}
.introduction .item {
  font-size: 28rpx;
  padding: 24rpx 20rpx;
  border-bottom: 1rpx solid #EEEEEE;
}
.introduction .item .title {
  margin-right: 16rpx;
  width: 120rpx;
  color: #333333;
  text-align: right;
}
.introduction .item .content {
  color: #666666;
  font-size: 26rpx;
  flex: 1;
}
.introduction .item .rightIcon {
  margin-left: 10rpx;
}
.introduction .item .rightIcon .iconfont {
  color: #666666;
}

.details {
	background-color: #FFFFFF;
}
.details .titleBox {
	font-weight: 600;
	padding: 20rpx 0;
	/* border-bottom: 1rpx solid #EEEEEE; */
}
.details .titleBox .title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	position: relative;
	padding: 0 80rpx;
}
.details .title::before {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	left: 0;
	top: 18rpx;
}
.details .title::after {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	right: 0;
	top: 18rpx;
}

.bottomBox {
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.09);
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 32rpx 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bottomBox .operate {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 100%;
}
.bottomBox .operate .item {
	text-align: center;
	padding: 0 26rpx;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.bottomBox .operate .item .text {
	font-size: 24rpx;
	color: #666666;
	margin-top: 4rpx;
}
.bottomBox .operate .item.share {
	background-color: transparent;
	line-height: 32rpx;
}
.bottomBox .operate .item.share::after {
	border: none;
	border-radius: 0;
}

.bottomBox .btnBox .btn {
	width: 180rpx;
	height: 80rpx;
	margin: 0;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: 600;
}
.bottomBox .btnBox .btn:first-of-type{
	border-radius: 40rpx 0 0 40rpx;
	color: var(--primaryColor);
	border: 1rpx solid var(--primaryColor);
	background-color: rgba(254, 0, 0, 0.1);
}
.bottomBox .btnBox .btn:last-of-type {
	width: 280rpx;
	background: var(--btnBgColor);
	border-radius:  0 40rpx 40rpx 0;
}
.bottomBox .btnBox .btn2 {
	width: 460rpx;
	height: 80rpx;
	margin: 0;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: 600;
	background: var(--btnBgColor);
	border-radius: 40rpx;
}

.popupBox {
	padding: 60rpx 20rpx 20rpx;
}
.popupBox .topBox .comImg {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
}
.popupBox .topBox .info {
  flex: 1;
  box-sizing:border-box;
  padding-left: 20rpx;
  padding-right: 60rpx;
}
.popupBox .topBox .info .title {
  font-size: 28rpx;
  font-weight: 600;
}
.popupBox .topBox .info .price {
  margin-top: 20rpx;
  font-size: 40rpx;
}

.popupBox .format {
  padding: 20rpx 0 0 0;
  border-bottom: 1rpx solid #eeeeee;
}
.popupBox .format .title{
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
.popupBox .format .itemList {
  display: flex;
  flex-wrap: wrap;
}
.popupBox .format .itemList .item {
  font-size: 26rpx;
  color: #999999;
  border: 1rpx solid #999999;
  border-radius: 10rpx;
  padding: 4rpx 16rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.popupBox .format .itemList .item.itemActive {
  color: var(--primaryColor);
  border: 1rpx solid var(--primaryColor);
}
.popupBox .buyBtn {
	border-radius: 60rpx;
	background: var(--btnBgColor);
	font-size: 32rpx;
}

.notice .noticeImg {
    width: 750rpx;
    vertical-align: middle;
}

.popum{
	position: fixed;
	left: 0;
	top: 50%;
	animation: 5s divAnimate linear 1 forwards;
	text-align: center;
	background-color: rgba(228, 231, 237, 0.8);
	height: 144rpx; 
	width: 228rpx;
	padding: 20rpx 30rpx;
	border-radius: 10rpx
}
@keyframes divAnimate {
  0% {
    transform: translateX(-228rpx);
    -webkit-transform: translateX(-228rpx);
  }
  100% {
    transform: translateX(978rpx);
    -webkit-transform: translateX(978rpx);
  }
}
.popum image{
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-bottom: 6rpx;
}
.popum .uName {
	font-size: 24rpx;
}
.popum .uName .text {
	width: 90rpx;
}

.winningMask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s ease-in-out;
}
.winningMask.winningShow {
	opacity: 1;
	transform: scale(1);
}
.winning {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 680rpx;
	border-radius: 12rpx;
	padding: 140rpx 20rpx 80rpx;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.winningImage {
	width: 580rpx;
	height: 291rpx;
	vertical-align: middle;
	margin-top: -300rpx;
	animation: winImgAnimate 2s linear infinite forwards;
}
.winning .con {
	text-align: center;
}
.winning .con .label {
	font-size: 28rpx;
	color: #333333;
}
.winning .con .winningName {
	font-size: 34rpx;
	font-weight: 600;
	vertical-align: middle;
}
.winning .con .winningName .avatarBox {
	position: relative;
}
.winning .con .winningName .crown {
	position: absolute;
	top: -26rpx;
	right: -12rpx;
	z-index: 10;
	width: 72rpx;
	height: 59rpx;
}
.winning .con .winningName .avatar {
	width: 88rpx;
	height: 88rpx;
	border-radius: 88rpx;
	margin-bottom: 8rpx;
}
.winning .con .failureList{
	padding-top: 10rpx;
}
.winning .con .failureList .item {
	color: #999999;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	flex-direction: column;
}
.winning .con .failureList .item .avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 60rpx;
	margin-bottom: 6rpx;
}
.winning .con .failureList .item .uName {
	height: 32rpx;
	width: 100rpx;
	overflow: hidden;
}
.winning .btn {
	background: var(--btnBgColor);
	border-radius: 60rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	width: 440rpx;
}
.winning .iconBox {
	position: absolute;
	bottom: -100rpx;
	left: 50%;
	transform: translateX(-50%);
}
.winning .iconBox .custom-icon {
	color: #FFFFFF;
	font-size: 64rpx;
}
@keyframes winImgAnimate {
  0% {
      transform: scale(0.92);
  }
  50% {
	  transform: scale(1);
  }
  100% {
      transform: scale(0.92);
  }
}

.avatarPopup {
	padding: 68rpx 32rpx 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.avatarPopup .uName {
	font-size: 32rpx;
	margin-top: 16rpx;
}
</style>
